<template>
    <el-dialog v-model="baTable.table.extend!.showStockDialog" :title="$t('shop.goods.goods.stock_info')" class="ba-operate-dialog">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ $t('shop.goods.goods.editStock') }}
            </div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <el-table :data="baTable.table.extend!.rowData.sku">
                <el-table-column align="center" prop="spec" :label="$t('shop.goods.goods.spec_info')" />
                <el-table-column align="center" :label="$t('shop.goods.goods.edit_stock')">
                    <template #default="{ row }">
                        <el-input-number v-model="row.stock" :min="0" />
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="baTable.table.extend!.showStockDialog = false">{{ $t('Cancel') }}</el-button>
                <el-button type="primary" @click="editStock()">{{ $t('Save') }}</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import type baTableClass from '/@/utils/baTable'
import { editStockData } from '/@/api/backend/shop/goods/goods'

const baTable = inject('baTable') as baTableClass

interface stock {
    id: number
    stock: number
}

//修改库存
const editStock = () => {
    const newStock = baTable.table.extend!.rowData.sku.map((item: stock) => {
        return {
            id: item.id,
            stock: item.stock,
        }
    })
    editStockData({
        goods_id: baTable.table.extend!.rowData.id,
        data: newStock,
    }).then(() => {
        baTable.table.extend!.showStockDialog = false
        baTable.onTableHeaderAction('refresh', {})
    })
}
</script>

<style scoped lang="scss">
.info-box {
    margin-top: 60px;
    div {
        width: 100%;
        text-align: center;
    }
    .mt-40 {
        margin-top: 40px;
    }
}
</style>
